<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用axis</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
</head>

<body>

    <div id="app">
        <h3>who‘s better Socrates or plato?</h3>
        <p>Technically, without plato we would't have<br>
        much to go when it comes to information about<br>
        Socrates.Plato ftw!</p>

        <form>
            <label>Write your comment:</label>
            <textarea v-model="message"></textarea>
            <button @click.prevent="submit">Send!</button>
        </form>
        <p>Server got: {{response}}</p>
    </div>

    <script>

        new Vue({
            el: '#app',
            data:{
                message: '',
                response: '...'
            },
            methods:{
                submit(){
                    axios.post('http://jsonplaceholder.typicode.com/comments', {
                        body: this.message
                    }).then(response => {
                        this.response = response.data;
                    })
                }
            },
            mounted(){
                axios.interceptors.request.use(config => {
                    console.log(config);
                    const body = config.data.body.replace(/punk/i, '***');
                    config.data.body = body;
                    return config;
                })
            }
        })
    </script>
</body>

</html>